<script setup>
import { ref } from 'vue'
import TextInput from '@/components/TextInput/TextInput.vue'

// 添加响应式数据
const username = ref('')
const email = ref('')
const price = ref('')
const disabledValue = ref('这是禁用状态')
const bio = ref('')
</script>

<template>
  <div class="input-demo">
    <h1>TextInput 输入框组件示例</h1>

    <div class="demo-section">
      <h2>基础用法</h2>
      <TextInput v-model="username" placeholder="请输入用户名" />
    </div>

    <div class="demo-section">
      <h2>带标签和验证</h2>
      <p class="description">支持邮箱格式验证</p>
      <TextInput
          v-model="email"
          label="邮箱"
          placeholder="name@example.com"
          pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
      />
    </div>

    <div class="demo-section">
      <h2>带前后缀</h2>
      <p class="description">自定义颜色和边框</p>
      <TextInput
          v-model="price"
          prefix="¥"
          suffix="元"
          size="large"
          color="#2c3e50"
          borderColor="#3498db"
      />
    </div>

    <div class="demo-section">
      <h2>禁用状态</h2>
      <TextInput
          v-model="disabledValue"
          label="禁用输入"
          disabled
          placeholder="无法编辑"
      />
    </div>

    <div class="demo-section">
      <h2>带长度限制</h2>
      <p class="description">最多输入200字符</p>
      <TextInput
          v-model="bio"
          label="个人简介"
          placeholder="请输入个人简介"
          maxlength="200"
          size="small"
          borderColor="#27ae60"
      />
    </div>
  </div>
</template>

<style scoped>
.input-demo {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

h2 {
  font-size: 18px;
  color: #34495e;
  margin-bottom: 16px;
}

.description {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}
</style>